<template>
  <view class="goods-introduce" :style="[goodsIntroduceCss]">
    <template>
      <view :style="[moduleBgCss]" class="module-bg"></view>
      <view class="introduce-section">
        <!-- 非拼团正常展示商品价格 -->
        <view class="introduce-header">
          <view class="price-section">
            <view class="price-box" v-if="propsData.params.showPrice">
              <view class="price" v-if="!goodsInfo.is_negotiable">
                <text>¥</text>
                <text>{{ goodsInfo.min_price | priceBeforeZero }}</text>
                <text>{{ goodsInfo.min_price | priceAfterZero }}</text>
              </view>
              <view class="price" v-else>
                <text></text>
                <text>{{ $t("diy.negotiable") }}</text>
                <text></text>
              </view>

              <view
                v-if="showMemberPrice && goodsInfo.is_level"
                class="origin-price"
              >
                <span>¥{{ goodsInfo.min_member_price }}</span>
                <image
                  class="member-price-img"
                  :src="asyncImgs.goods.vipicon"
                />
              </view>
              <view
                v-if="showOriginPrice && parseFloat(goodsInfo.original_price)"
                class="old-price"
                >¥{{ goodsInfo.original_price }}</view
              >
            </view>

            <view class="flex">
              <view class="integral-box" v-if="goodsInfo.integral.give">
                赠送{{ goodsInfo.integral.give }}积分
              </view>
              <view class="integral-box" v-if="goodsInfo.confine_count">
                限购{{ goodsInfo.confine_count }}件
              </view>
              <view class="integral-box" v-if="goodsInfo.integral.forehead">
                积分最多抵扣{{ goodsInfo.integral.forehead }}元
              </view>
            </view>
          </view>
          <view class="share-section" v-if="propsData.params.showSales">
            <p class="sale-num">
              {{ $t("goods.count") }}
              {{
                (goodsInfo.cutGoods
                  ? parseInt(goodsInfo.cutGoods.virtual_sales || 0) +
                    parseInt(goodsInfo.sales || 0)
                  : goodsInfo.sales || 0) +
                " " +
                goodsInfo.unit
              }}
            </p>
          </view>
        </view>

        <view
          class="levelBox"
          v-if="showMemberPrice && goodsInfo.next_level"
          @click="$utils.toUrl('/user/member/member_center')"
        >
          <image
            class="levelBg"
            :src="asyncImgs.goods.goods0"
            mode="widthFix"
          ></image>
          <view class="levelBoxCon">
            <view class="let">
              <image :src="asyncImgs.goods.goods1" mode="widthFix"></image>
              <view class="num">{{ goodsInfo.next_level.name }}</view>
              <view class="num num1">会员价</view>
              <view class="num">￥{{ goodsInfo.next_level.goods_price }}</view>
            </view>
            <view class="rig">
              <view class="num">立即开通</view>
              <image :src="asyncImgs.goods.goods2" mode="widthFix"></image>
            </view>
          </view>
        </view>

        <view class="goods-name" v-if="propsData.params.showGoodsName">{{
          goodsInfo.name
        }}</view>
      </view>
    </template>

    <view class="collect">
      <view
        class="collectItem"
        @click="$emit('collect')"
        v-if="propsData.params.showCollect"
      >
        <i class="iconfont icon-collection" v-if="!goodsInfo.is_favorite"></i>
        <i class="iconfont icon-collection-fill" v-else></i>
        收藏
      </view>
      <view
        v-if="propsData.params.showShare"
        class="collectItem"
        @click="$emit('shareGood')"
      >
        <i class="iconfont icon-share"></i>分享
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    goodsInfo: {
      type: Object,
      default: {}
    },
    is_pt: {
      type: [String, Boolean],
      default: false
    },
    activityCutPriceId: {
      type: [String, Number],
      default: ""
    },
    cutOrder: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {};
  },
  mounted() {
  },
  watch: {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    }
  },
  computed: {
    showMemberPrice() {
      return this.propsData.params.showPrice;
    },
    showOriginPrice() {
      return this.propsData.params.showOriginPrice;
    },
    goodsIntroduceCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.moduleCss);
      if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
      if (style.padding) style.padding = `0 ${style.padding * 2}rpx`;
      if (style.borderRadius)
        style["borderRadius"] = `${style.borderRadius * 2}rpx`;
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        padding: style.padding,
        position: "relative",
        overflow: "hidden"
      };
      return obj;
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-introduce {
  width: 100%;
  position: relative;
  background: #fff;
  .introduce-section {
    width: 100%;
    padding: 2.67vw 4.8% 0;
    .introduce-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .price-section {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-direction: column;
        .price-box {
          display: flex;
          align-items: baseline;
          .price {
            display: flex;
            align-items: flex-end;
            font-size: 34rpx;
            font-weight: 600;
            color: #f8260a;
            line-height: 50rpx;
            text:nth-child(2) {
              font-size: 56rpx;
              line-height: 62rpx;
            }
          }
          .origin-price {
            font-size: 28rpx;
            font-weight: 600;
            color: #232326;
            margin-left: 16rpx;
            .member-price-img {
              width: 60rpx;
              height: 24rpx;
              margin-left: 6rpx;
            }
          }

          .old-price {
            font-size: 28rpx;
            font-weight: 400;
            color: #8c8c8c;
            margin-left: 20rpx;
            text-decoration: line-through;
          }
        }
      }
      .share-section {
        display: flex;
        flex-direction: column;
        padding-top: 20rpx;
        // justify-content: flex-end;
        // align-items: flex-end;
        .price-bottom-text {
          font-size: 24rpx;
          color: #f8260a;
        }
        .sale-num {
          font-size: 22rpx;
          font-weight: 400;
          color: #8c8c8c;
          margin-bottom: 0;
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    .goods-virtues {
      display: flex;
      align-items: center;
      margin-top: 4rpx;
      .goods-virtues-item {
        display: flex;
        align-items: center;
        span {
          width: 4rpx;
          height: 4rpx;
          border-radius: 50%;
          background-color: #262626;
          display: inline-block;
        }
        p {
          font-size: 24rpx;
          color: #262626;
          margin-bottom: 0;
          margin-left: 1.33px;
          margin-right: 1.6vw;
        }
      }
    }
    .goods-grey-text {
      margin-top: 3.2vw;
      font-size: 24rpx;
      font-weight: 400;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.integral-box {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #f0250e;
  margin: 0 10rpx 26rpx 0;
  background: linear-gradient(92deg, #ffe4e3 0%, #fce9e1 100%);
  border-radius: 4rpx;
  padding: 2rpx 4rpx;
}

.flex {
  padding-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.share-box {
  width: 19.2vw;
  height: 7.46vw;
  background: #fdf1f0;
  border-radius: 3.73vw 0 0 3.73vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 1.86vw;
  .iconfont {
    font-size: 38rpx;
    color: #f8260a;
  }
  span {
    font-size: 24rpx;
    color: #262626;
    margin-left: 4rpx;
  }
}

.goods-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #262626;
  word-break: break-all;
}

.levelBox {
  position: relative;
  margin: 20rpx 0;
}

.levelBg {
  display: block;
  width: 100%;
}

.levelBoxCon {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx 14rpx;
  width: 100%;
  height: 100%;

  .num {
    font-size: 24rpx;
    color: #4f322a;
    font-weight: bold;
  }

  .num1 {
    font-weight: normal;
    padding-left: 20rpx;
  }

  .let {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;

    image {
      margin-right: 10rpx;
      width: 28rpx;
    }
  }

  .rig {
    display: flex;
    align-items: center;
    image {
      margin-left: 12rpx;
      width: 12rpx;
    }
  }
}

.collect {
  display: flex;
  background: #fff;
}

.collectItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0;
  height: 84rpx;
  line-height: 1;
  background: none;
  font-size: 24rpx;
  color: #8c8c8c;

  &::after {
    display: none;
  }

  .iconfont {
    margin-right: 10rpx;
    font-size: 40rpx;
  }

  .icon-collection,
  .icon-collection-fill {
    position: relative;
    top: -2rpx;
  }

  .icon-collection-fill {
    color: #f0250e;
  }
}
</style>
